<template>
  <section class="ybweb">
    <client-only placeholder="加载中...">
      <HomeAnimation />
    </client-only>
    <div class="w-content-box">
      <w-banner :models="banners" />
      <w-links :models="links" />
      <w-study-time-line :models="timeLines" />
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WBanner from '@/components/web/home/banner'
import WLinks from '@/components/web/home/links'
import WStudyTimeLine from '@/components/web/home/studyTimeLine'
import { Api } from '@/config/api'

@Component({
  name: 'WebHome',
  layout: 'web',
  components: {
    WBanner,
    WLinks,
    WStudyTimeLine,
    HomeAnimation: () => import('@/components/global/homeAnimation')
  },
  head () {
    return {
      title: '一曲终了、只余一声空叹'
    }
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/')
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await Promise.all([
      $wAxios.$get(Api.banner.all),
      $wAxios.$get(Api.homeLink.all),
      $wAxios.$get(Api.studyTimeLine.all)
    ])
    return { banners: data[0], links: data[1], timeLines: data[2] }
  }
})
export default class WebHome extends Vue {
}
</script>

<style lang="less"></style>
